<template>
  <div class="tl1 flex flexwrap">
    <div v-for="item in tl1List" :key="item.key" class="tl1-item">
      <div v-if="topLoading" style="padding:20px">
        <a-skeleton />
      </div>
      <div v-else>
        <div class="title flex">
          <p>{{ item.key }}</p>
          <el-tooltip effect="dark" :content="item.detail" placement="top">
            <i class="el-icon-warning-outline" />
          </el-tooltip>
        </div>
        <p class="number">
          {{ item.isMoney ? "¥" : "" }}{{ item.value.toLocaleString() }}
          <span v-if="item.isup > 0" :class="{ up: item.isup === 1 }">{{
            item.isup === 1 ? "↑" : "↓"
          }}</span>
        </p>
        <div class="line" />
        <p class="enxtend">{{ item.today }}</p>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: 'Numberitem',
  props: {
    tl1List: {
      type: Array,
      default: () => []
    },
    topLoading: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.tl1 {
  .tl1-item {
    background: white;
    width: calc((100% - 60px) / 4);
    margin-bottom: 20px;
    .title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      margin: 20px;
    }
    .el-icon-warning-outline {
      cursor: pointer;
    }
    .number {
      font-size: 26px;
      line-height: 38px;
      margin: 20px;
      span {
        color: #52c41a;
      }
      span.up {
        color: red;
      }
    }
    .enxtend {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 40px;
      border-top: 1px solid #e8e8e8;
      margin: 20px 20px 0 20px;
    }
  }
  @media screen and (max-width: 768px) {
    .tl1-item {
      width: 100%;
    }
  }
}
</style>
